{% extends './base.html' %}
{% block title %}分类列表{% endblock %}
{% block header %}

{% endblock %}
{% block footer %}
    <script>
        $(function () {
            // 新增分类
            $('#add-btn').click(function () {
                var cur_modal = $(this).parents('.modal')
                var new_category = cur_modal.find('input[name=name]').val().trim()
                if (!new_category) {
                    lightyear.notify('新分类不可为空~~', 'danger', 1000);
                } else {
                    lightyear.loading('show');
                    $ajax.post({
                        url: '/cms/category/',
                        data: {
                            name: new_category
                        },
                        success: function (res) {
                            lightyear.loading('hide');
                            if (res.code === 200) {
                                cur_modal.modal('hide')
                                lightyear.notify(res.msg, 'success', 1000);
                                setTimeout(function () {
                                    location.reload()
                                }, 1000)
                            } else {
                                lightyear.notify(res.msg, 'danger', 100);
                            }
                        }
                    })
                }
            })
            var edit_params = {}
            // 打开
            $(document).on('click', '.edit-btn', function () {
                edit_params['id'] = $(this).parents('tr').attr('data-pk')
                var old_name = $(this).parents('tr').attr('data-name')
                console.log(old_name);
                $('.edit-modal').find('input[name=old]').val(old_name)
                $('.edit-modal').modal('show')
            })
            // 确定修改分类
            $('#edit-btn').click(function () {
                var cur_modal = $(this).parents('.modal')
                var new_category = cur_modal.find('input[name=name]').val().trim()
                if (!new_category) {
                    lightyear.notify('新分类不可为空~~', 'danger', 1000);
                } else {
                    lightyear.loading('show');
                    edit_params['name'] = new_category
                    $ajax.put({
                        url: '/cms/category/',
                        data: JSON.stringify(edit_params),
                        success: function (res) {
                            lightyear.loading('hide');
                            if (res.code === 200) {
                                cur_modal.modal('hide');
                                lightyear.notify(res.msg, 'success', 1000);
                                setTimeout(function () {
                                    location.reload()
                                }, 1000)
                            } else {
                                lightyear.notify(res.msg, 'danger', 100);
                            }
                        }
                    })
                }
            })

            var params = {
                page: 1,
                limit: 4,
            }
            var category_box = $('#category-box')
            var page_box = $('#page-box')
            getCategoryApi()

            // 获取分类
            function getCategoryApi() {
                lightyear.loading('show')
                $ajax.get({
                    url: '/v1/api/category/',
                    data: params,
                    success: function (res) {
                        lightyear.loading('hide')
                        if (res.code === 200) {
                            category_box.empty()
                            page_box.empty()
                            var html = template('category-item', {'categories': res.data})
                            category_box.append(html)
                            page_box.append(renderPage(res))
                        } else {
                            lightyear.notify('获取分类失败~~', 'danger', 1000)
                        }
                    }
                })
            }

            // 点击页数
            $(document).on('click', '#page-box li', function () {
                var p = $(this).attr('data-page')
                if (p) {
                    params['page'] = p
                    getCategoryApi()
                }
            })
        })
    </script>
{% endblock %}
{% block utils %}
    <div class="modal fade add-modal" tabindex="-1" role="dialog"
         aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">新增分类</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" name="name" placeholder="新分类">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add-btn">新增</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade edit-modal" tabindex="-1" role="dialog"
         aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">修改分类</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" name="old" readonly>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" name="name" placeholder="新分类">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="edit-btn">修改</button>
                </div>
            </div>
        </div>
    </div>
    {% verbatim %}
    <script type="text/html" id="category-item">
        {{ each categories category }}
        <tr data-pk="{{ category.id }}" data-name="{{ category.name }}">
            <td>{{ category.id }}</td>
            <td>{{category.name}}</td>
            <td>{{category.post_num}}</td>
            <td>
                <div class="btn-group">
                    <button class="btn btn-xs btn-default edit-btn" title="编辑"
                            data-toggle="tooltip"><i class="mdi mdi-pencil"></i></button>
                </div>
            </td>
        </tr>
        {{ /each }}
    </script>
    {% endverbatim %}
{% endblock %}

{% block main %}
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <div class="toolbar-btn-action">
                        <button class="btn btn-primary m-r-5" data-toggle="modal" data-target=".add-modal"><i
                                class="mdi mdi-plus"></i> 新增
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>分类名</th>
                                <th>文章数量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="category-box">

                            </tbody>
                        </table>
                    </div>
                    <ul class="pagination" id="page-box">

                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}